<template>
  <div>
    <el-row>
      <slot name="menubtn"></slot>
    </el-row>
    <el-row>
      <!-- <el-scrollbar height="500px" width="100%"> -->
      <el-table
        stripe
        :data="
          tableData.slice((currentPage - 1) * pageSize, currentPage * pageSize)
        "
        height="500"
        width="100%"
        highlight-current-row
        @selection-change="handleSelectionChange"
        @row-click="handleRowClick"
      >
        <el-table-column type="selection" width="55" fixed />
        <el-table-column type="index" width="55" />
        <el-table-column
          v-for="item in filterOptions"
          :key="item"
          :prop="item.prop"
          :label="item.label"
          :width="item.width"
          align="center"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-image
              style="height: 35px; width: 35px"
              v-if="item.type === 'image'"
              :src="
                'http://127.0.0.1:8090/public/avator/' + scope.row[item.prop]
              "
            >
              <template #error>
                <div class="image-slot">
                  <el-icon><icon-picture /></el-icon>
                </div> </template
            ></el-image>
            <div v-else-if="item.type === 'images'">
              <el-image
                style="height: 40px; width: 40px; margin-right: 5px"
                :src="
                  'http://127.0.0.1:8090/public/homestay/' +
                  scope.row[item.prop].split(',')[0]
                "
              ></el-image>
              <el-image
                style="height: 40px; width: 40px; margin-right: 5px"
                :src="
                  'http://127.0.0.1:8090/public/homestay/' +
                  scope.row[item.prop].split(',')[1]
                "
              ></el-image>
              <el-image
                style="height: 40px; width: 40px"
                :src="
                  'http://127.0.0.1:8090/public/homestay/' +
                  scope.row[item.prop].split(',')[2]
                "
              ></el-image>
            </div>
            <el-switch
              v-else-if="item.prop == 'status' && item.type === 'select'"
              v-model="scope.row[item.prop]"
              :active-value="1"
              :inactive-value="0"
              @change="handleChange(scope.row[item.prop])"
            ></el-switch>
            <span v-else-if="item.prop == 'status' && item.type === 'more'">
              <el-tag type="warning" v-if="scope.row[item.prop] === 1"
                >未发布
              </el-tag>
              <el-tag type="warning" v-if="scope.row[item.prop] === 2"
                >待审核
              </el-tag>
              <el-tag type="warning" v-if="scope.row[item.prop] === 3"
                >已上线
              </el-tag>
              <el-tag type="warning" v-if="scope.row[item.prop] === 4"
                >已下线
              </el-tag>
              <el-tag type="warning" v-if="scope.row[item.prop] === 5"
                >审核失败
              </el-tag>
            </span>

            <span v-else-if="item.type === 'info'">
              <el-tag type="primary" v-if="scope.row[item.prop] === 1"
                >系统通知
              </el-tag>
              <el-tag type="success" v-else>消息通告 </el-tag>
            </span>

            <span v-else-if="item.prop === 'position'">
              <el-tag type="danger" v-if="scope.row[item.prop] === 1"
                >管理员
              </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 2">房客 </el-tag>
              <el-tag type="warning" v-else>房主 </el-tag>
            </span>
            <span v-else-if="item.prop === 'rentType'">
              <el-tag type="success" v-if="scope.row[item.prop] === 1"
                >整套出租
              </el-tag>
              <el-tag type="success" v-else-if="scope.row[item.prop] === 2"
                >单间出租
              </el-tag>
              <el-tag type="success" v-else>合住房间</el-tag>
            </span>
            <span v-else-if="item.prop === 'homeType'">
              <el-tag v-if="scope.row[item.prop] === 1">别墅 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 2">公寓 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 3"
                >住宿加早餐
              </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 4">Loft </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 5">小木屋 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 6">城堡 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 7">宿舍 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 8">蒙古包 </el-tag>
              <el-tag v-else>帐篷</el-tag>
            </span>
            <span v-else-if="item.type == 'time'">
              <span v-if="!scope.row[item.prop]"></span>
              <span v-else>{{ toTime(scope.row[item.prop]) }}</span>
            </span>
            <span v-else-if="item.type == 'date'">{{
              toDate(scope.row[item.prop])
            }}</span>
            <span v-else-if="item.prop === 'state'">
              <el-tag v-if="scope.row[item.prop] === 1">待确认 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 2">待支付 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 3">待入住 </el-tag>
              <el-tag v-else-if="scope.row[item.prop] === 4">已完成</el-tag>
              <el-tag v-else>已退订</el-tag>
            </span>

            <span v-else-if="item.prop == 'isRead'">
              <el-tag v-if="scope.row[item.prop] === 1">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </span>

            <span v-else>{{ scope.row[item.prop] }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="240" align="center">
          <template #default="scope">
            <slot name="operate" :row="scope.row"></slot>
          </template>
        </el-table-column>
      </el-table>
      <!-- </el-scrollbar> -->
    </el-row>

    <el-pagination
      style="margin-top: 20px; float: right"
      v-model:current-page="currentPage4"
      v-model:page-size="pageSize4"
      :page-sizes="[8, 10, 20, 50, 100]"
      :page-size="pageSize"
      :current-page="currentPage"
      :small="small"
      :disabled="disabled"
      :background="background"
      layout="total, sizes, prev, pager, next, jumper"
      :total="tableData.length"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>

<script setup lang="ts">
import { toTime, toDate } from "../../util/toTime";
import { defineProps, defineEmits, ref } from "vue";
import { Picture as IconPicture } from "@element-plus/icons-vue";
// import { ElTable } from "element-plus";
const currentPage = ref(1); //当前页
const pageSize = ref(10); //每页多少条
const small = ref(false);
const background = ref(false);
const disabled = ref(false);
//每页多少条
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  pageSize.value = val;
};
//当前页
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  currentPage.value = val;
};

const props = defineProps({
  tableData: Array,
  options: Array,
});
const filterOptions = props.options?.filter(
  (item: any) => item.isTable == true
);

// const multipleTableRef = ref<InstanceType<typeof ElTable>>();
const emit = defineEmits(["getSelection", "clickRow"]); //子传父
const multipleSelection = ref<any>([]); //多选项
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
  // console.log("multipleSelection.value", multipleSelection.value);
  emit("getSelection", multipleSelection.value);
};
const handleRowClick = (row) => {
  console.log(row);
  emit("clickRow", row);
};
const handleChange = (status: any) => {
  console.log(status);
};
</script>
